<template>
  <main-menu/>
  <div>
<!--    <el-button class="button_logout" type="primary" icon="el-icon-switch-button" @click="logout" circle></el-button>-->
<!--    <img src='https://pic.imgdb.cn/item/621c26082ab3f51d91c6a8bf.jpg' width="128" height="128" style="position: absolute; left: 34%; top: 0px">-->
    <div class="center-container">
      <!-- <h1 style="font-size: 40px; min-height: 50px; max-height: 60px">我的数据集</h1>-->
      <el-collapse v-model="activeNames" class="center-page" accordion>
        <div align="right">
          <div style="float: left;height: 40px;font-weight:bold;font-size: larger">
            我的数据集
          </div>
          <el-button type="primary" @click="DialogNewDataSet = true" style="width: 125px;height: 40px">
            <el-icon class="fa fa-plus" style="vertical-align: middle;"/>
            <span style="vertical-align: middle;"> 新建数据集 </span>
          </el-button>
          <p/>
        </div>
        <el-collapse-item accordion v-for="ds in ds_table" :key="ds.ds_id" class="collapse-type" align="left">
          <template #title>
            <i class="fa fa-database"></i>&emsp;{{ ds.ds_name }}
          </template>
          <el-table :data="[ds]" border style="width: 100%">
            <el-table-column prop="ds_id" label="数据集ID" width="100" align="center"></el-table-column>
            <el-table-column prop="ds_number" label="图片数量" width="100" align="center"></el-table-column>
            <el-table-column prop="ds_length" label="图片长度" width="100" align="center"></el-table-column>
            <el-table-column prop="ds_width" label="图片宽度" width="100" align="center"></el-table-column>
            <el-table-column prop="verify" label="验证码" width="180" align="center">
              <template v-slot="scope">
                {{ scope.row.verify }}
                <el-button type="text" align="right" size="mini" @click="handleCopy(scope.$index, scope.row)"> 复制
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="数据集描述" align="center" width="200">
              <template v-slot="scope">
                <el-button size="mini" type="primary" @click="handleDisplay(scope.row)">
                  <el-icon class="fa fa-eye" style="vertical-align: middle;"/>
                  <span style="vertical-align: middle;"> MarkDeep 查看 </span>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="process" label="采集进度" width="140" align="center">
              <el-progress type="circle" :percentage=ds.process :color="colors" width="48"
                           style="margin-left:-55px"></el-progress>
              <el-button @click="showChart(ds)" type="text" size="mini"
                         style="min-height: 48px;position: absolute;padding-left: 10px"> 查看详情
              </el-button>

            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="primary" @click="handleDownload(scope.row)">
                  <el-icon class="fa fa-download" style="vertical-align: middle;"/>
                  <span style="vertical-align: middle;"> 下载 </span>
                </el-button>
                <el-popconfirm title="您确定删除该数据集吗？" @confirm="handleDelete(scope.row)" confirm-button-text="是"
                               cancel-button-text="否">
                  <template #reference>
                    <el-button size="mini" type="danger">
                      <el-icon class="fa fa-trash" style="vertical-align: middle;"/>
                      <span style="vertical-align: middle;"> 删除 </span>
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog v-model="dialogMarkdownVisible" title="编辑数据集描述文档(MarkDeep)" width="70%">
      <div style="width: 100%;height: 400px">
        <textarea id="markdeeptext"
                  style="min-height: 100%;min-width: 49%;max-width: 49%;max-height: 100%;font-size: 16px;font-family: consolas, Courier, monospace;"
                  wrap="off" v-on:input="makeMarkdeep()"></textarea>
        <iframe id="markdeeppage" designMode='on' height="100%" width="49%" style="float:right"></iframe>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave"> 保存 </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogMarkdown2Visible" title="预览数据集描述文档(MarkDeep)" width="50%">
      <div style="width: 100%;height: 400px">
        <iframe id="markdeeppage2" designMode='on' :srcdoc="tmpdoc" height="100%" width="100%"
                style="float:right"></iframe>
      </div>
    </el-dialog>
    <el-dialog v-model="DialogNewDataSet">
      <template #title>
        <div style="font-size: 30px">新建数据集</div>
      </template>

      <el-form :model="FormNewDataSet" :rules="rules" ref="FormNewDataSet">
        <el-form-item label="数据集名称" :label-width="formLabelWidth" prop="name">
          <el-input type="text" v-model="FormNewDataSet.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据集描述" :inline="true" :label-width="formLabelWidth" prop="description">
          <el-input v-model="FormNewDataSet.description">
            <template #append>
              <el-button size="mini" @click="handleMarkdown">
                <el-icon class="fa fa-edit" style="vertical-align: middle;"/>
                <span style="vertical-align: middle;"> MarkDeep </span>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="所需图片数量" :label-width="formLabelWidth" prop="num">
          <el-input v-model="FormNewDataSet.num" autocomplete="off" type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="图片长度" :label-width="formLabelWidth" prop="length">
          <el-input v-model="FormNewDataSet.length" autocomplete="off" type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="图片宽度" :label-width="formLabelWidth" prop="width">
          <el-input v-model="FormNewDataSet.width" autocomplete="off" type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="是否公开" :label-width="formLabelWidth">
          <div align="left">
            <el-switch v-model="isPublic" inline-prompt
                       active-text="是" inactive-text="否"
                       active-value="1" inactive-value="0"
                       active-color="#13ce66" inactive-color="#409EFF">
            </el-switch>
          </div>
        </el-form-item>
        <el-form-item label="标签名称" :label-width="formLabelWidth">
          <el-tag
              style=""
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="DialogNewDataSet = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible">
      <div style="margin-left: 50px">
        <v-chart class="chart" autoresize :option="chart_option"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MainMenu from "@/components/MainMenu";
import {get} from "@/utils/http";
import {ref} from "vue";
import {ElMessage} from "element-plus";
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

export default {
  name: "PrivateDataset",
  components: {
    MainMenu
  },
  data() {
    return {
      tmpdoc: '', // 预览 markdeep 文件
      activeNames: ['1'], // 默认展开的标签页
      copyData: null, // 校验码复制按钮复制的值
      isPublic: false, // 是否公开数据集
      dialogTableVisible: false, // 新建数据库对话框是否可见
      chart_option: null,
      dialogMarkdownVisible: true, // 编辑 markdeep 对话框是否可见
      dialogMarkdown2Visible: false, // 预览 markdeep 对话框是否可见
      ds_table: [], // 用户所有的数据集及其配置信息
      // 进度条的渐变色
      colors: [
        {color: '#f56c6c', percentage: 5},
        {color: '#f5976c', percentage: 15},
        {color: '#e6a23c', percentage: 25},
        {color: '#c2a25e', percentage: 35},
        {color: '#3db264', percentage: 45},
        {color: '#66c4b5', percentage: 55},
        {color: '#5eb3be', percentage: 65},
        {color: '#567cb4', percentage: 75},
        {color: '#5071f1', percentage: 90},
        {color: '#856fd3', percentage: 100}
      ],
      // 新建数据库配置表单的校验规则
      rules: {
        name: [{required: true, message: '数据集名称不能为空', trigger: 'blur'}],
        num: [{required: true, message: '所需图片数量不能为空', trigger: 'blur'}],
        length: [{required: true, message: '图片高度不能为空', trigger: 'blur'}],
        width: [{required: true, message: '图片宽度不能为空', trigger: 'blur'}],
      },
      DialogNewDataSet: false, // 取消新建数据库配置
      formLabelWidth: '120px', // 统一控制标签宽度
      FormNewDataSet: {
        name: '',
        description: '',
        num: '',
        width: '',
        length: '',
      }, // 数据库配置表单及其表项
      dynamicTags: [], // 存储用户选择的所有标签
      inputVisible: false, // 用户标签选择的输入框
      inputValue: '' // 用户标签选择的输入值
    }
  },
  created() {
    let footer = document.getElementById('footer')
    footer.innerHTML = "<div style=\"font-size: 10px; margin-top: 40px\"><hr><center><p style=\"font-size: 10px\">Author : Hanyu Su, Haotian Wang (CEO), Tianyi Guan, Yiming Li (COO), Yunsong Jia (CTO) </p><p>Power by : Vue 3.0 & Springboot.&emsp;&emsp;Arranged in alphabetical order.</p></center></div>"
    // 加载用户所有图像数据集的信息
    this.getDataset();
  },
  mounted() {
    this.checklogin();
    this.dialogMarkdownVisible = false;
  },
  methods: {
    /**
     * @description: 进入个人中心先检查用户是否登入，如果未登入则返回登录页面
     * @return void
     */
    checklogin() {
      let that = this;
      // 根据 Session 会话是否存储了 username 来判断
      if (sessionStorage.getItem('username') === null) {
        ElMessage.error({
          showClose: true,
          message: "您尚未登录，请重新登录",
          type: "error",
          center: true
        })
        let router_target = "PublicDataset";
        that.$router.push({
          name: router_target
        })
      }
    },

    /**
     * @description: 显示 markdeep 文档的预览页面
     * @return void
     */
    handleDisplay(row) {
      let that = this;
      that.tmpdoc = that.getMarkdeep2(row.description);
      that.dialogMarkdown2Visible = true;
    },

    /**
     * @description: 用户下载相应的图像数据集
     * @param {row}  用户希望下载的数据集所在行
     * @return void
     */
    handleDownload(row) {
      ElMessage.warning({
        showClose: true,
        message: "后台正在压缩您需要的数据集，请耐心等待，不要重复点击！",
        type: "warning",
        center: true
      })
      // 调用后端 datasetdownload 方法，其中返回的 msg 中存储了压缩数据集的 url 地址
      get('/datasetdownload', {
        datasetid: row.ds_id,
      }).then(function (res) {
        if (res.code === 1) {
          let url = res.msg
          window.open(url)
        } else {
          ElMessage.error({
            showClose: true,
            message: "下载失败",
            type: "error",
            center: true
          })
        }

      })
    },

    /**
     * @description: 用户删除相应的图像数据集及其在数据库中的配置信息
     * @param {row}  用户希望删除的数据集所在行
     * @return void
     */
    handleDelete(row) {
      let that = this;
      get('/deletedataset', {
        datasetId: row.ds_id,
      }).then(function (res) {
        if (res.code === 1) {
          // console.log(res);
          ElMessage.success({
            showClose: true,
            message: "删除成功",
            type: "success",
            center: true
          })
          // 为了使得删除的数据库不再显示在表格中需要刷新页面
          that.$router.go(0);
        } else {
          ElMessage.error({
            showClose: true,
            message: "删除失败",
            type: "error",
            center: true
          })
        }

      })
    },

    /**
     * @description: 用户编辑数据库配置信息，新建数据库
     * @return void
     */
    handleSubmit() {
      this.username = sessionStorage.getItem("username");
      let that = this;
      let labels = "";
      let isFirst = true;

      // 将标签列表中的元素去重，并拼接成字符串交给后端，例如 [a, b, c] -> 'a, b, c'
      that.dynamicTags = [...new Set(that.dynamicTags)];
      that.dynamicTags.forEach(function (item) {
        if (isFirst) {
          labels += (item + '');
          isFirst = false;
        } else {
          labels += (',' + item + '');
        }
      })

      this.$refs.FormNewDataSet.validate((valid) => {
        if (valid) {
          if (that.dynamicTags.length <= 0) {
            ElMessage.error({
              showClose: true,
              message: "请指定至少一个标签！",
              type: "error",
              center: true
            })
            return;
          } else if (that.dynamicTags.length > 18) {
            ElMessage.error({
              showClose: true,
              message: "指定的标签数量请不要超过 18 个！",
              type: "error",
              center: true
            })
            return;
          } else {
            get('/AddDataset', {
              datasetName: that.FormNewDataSet.name,
              datasetDescription: that.FormNewDataSet.description,
              username: that.username,
              count: that.FormNewDataSet.num,
              photo_width: that.FormNewDataSet.width,
              photo_height: that.FormNewDataSet.length,
              ispublic: that.isPublic,
              label_list: labels
            }).then(function (res) {
              // console.log(res);
              if (res.code === 1) {
                ElMessage.success({
                  showClose: true,
                  message: "数据集：" + that.FormNewDataSet.name + "已经创建",
                  type: "success",
                  center: true
                })
              }
              // 为了使得新建的数据库显示在表格中需要刷新页面
              that.$router.go(0);
            })
          }
        } else {
          console.log("error submit!")
        }
      })
    },

    /**
     * @description: 数据格式转换 [{num: a, label: b}] -> [{value: a, name: b}]，方便进行饼图绘制
     * @param {res}  待转换的数据
     * @return {mapped_data}
     */
    getMapData1(res) {
      let mapped_data = []
      for (let item in res) {
        mapped_data.push({value: res[item]["num"], name: res[item]["label"]})
      }
      return mapped_data
    },

    /**
     * @description: 得到所有标签 [{num: a, label: b}] -> [b]，方便进行饼图绘制
     * @param {res}  待转换的数据
     * @return {mapped_data}
     */
    getMapData2(res) {
      let mapped_data = []
      for (let item in res) {
        mapped_data.push(res[item]["label"])
      }
      return mapped_data
    },

    /**
     * @description: 求和函数
     * @param {res}  待求和的数据
     * @return {sum}
     */
    getSum(res) {
      let sum = 0
      for (let item in res) {
        sum = sum + res[item]["num"];
      }
      return sum
    },

    /**
     * @description: 饼图绘制函数
     * @param {v_label}  标签
     * @param {v_data}  数据
     * @return {ref}
     */
    getChart(v_label, v_data) {
      // 对目前还未收集到图像的数据库进行特殊处理
      if (v_label.length <= 0) {
        v_label.push('无');
        v_data.push({value: 0, name: '无'});
      }
      return ref({
        title: {
          text: '图像采集详细信息', // 主标题
          x: 'center', // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',      //可设定图例在左、右、居中
          y: 'center',     //可设定图例在上、下、居中
          padding: [0, 0, 0, 70],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        },
        series: [
          {
            name: '图像采集详细信息',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: v_data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },

    /**
     * @description: 获取用户所有的图像数据库及其配置信息
     * @return void
     */
    async getDataset() {
      this.username = sessionStorage.getItem("username");
      this.password = sessionStorage.getItem("password");
      let that = this;
      let tmp_label_num_pair_list = new Array();
      let tmp_label_list = new Array();
      let tmp_sum_list = new Array();
      get('/Selectnum', {
        username: that.username,
        password: that.password
      }).then(function (res) {
        // 对后端传来的数据格式进行解析
        for (let key in res.data) {
          tmp_label_num_pair_list.push(that.getMapData1(res.data[key]));
          tmp_label_list.push(that.getMapData2(res.data[key]));
          tmp_sum_list.push(that.getSum(res.data[key]));
        }
      })
      let cnt = 0;
      setTimeout(function () {
        get('/getdatasetmess', {
          username: that.username,
          password: that.password
        }).then(function (res) {
          if (res.code === 1) {
            // 遍历后端传来的数据库配置信息，将其逐个加入到前端表格中
            res.data.forEach(function (item) {
              var tmp = {
                ds_name: item.datasetName,
                ds_id: item.datasetId,
                ds_number: item.count,
                ds_length: item.photo_height,
                ds_width: item.photo_width,
                verify: item.verify,
                description: item.datasetDescription,
                chart_option: that.getChart(tmp_label_list[cnt], tmp_label_num_pair_list[cnt]), // 绘制饼图
                dialogTableVisible: false,
                process: ((tmp_sum_list[cnt] * 100) / item.count).toFixed(1), // 计算进度并设置采集进度条显示一位小鼠
              };
              that.ds_table.push(tmp);
              cnt = cnt + 1;
            })
          }
        })
      }, 500);
    },

    /**
     * @description: 折叠条改变时触发的事件
     * @return void
     */
    // handleChange(val) {
    //   console.log(val);
    // },

    /**
     * @description: 拷贝表格中的“校验码”文本信息
     * @param {row}  待拷贝数据所在的行
     * @return void
     */
    handleCopy(index, row) {
      this.copyData = row.verify;
      this.copy(this.copyData)
    },

    /**
     * @description: 拷贝表格中的“校验码”文本信息的具体方法
     * @param {row}  待拷贝数据所在的行
     * @return void
     */
    copy(data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      // 执行浏览器复制命令
      document.execCommand("Copy");
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove()
    },

    /**
     * @description: 关闭标签添加过程，并将其解析
     * @param {tag}  待解析的标签
     * @return void
     */
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    /**
     * @description: 将选择的标签显示在输入框中
     * @return void
     */
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    /**
     * @description: 将选择的标签存储到 dynamicTags 中
     * @return void
     */
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    /**
     * @description: 编辑 markdeep 页面的保存功能
     * @return void
     */
    handleSave() {
      let that = this;
      that.dialogMarkdownVisible = false;
      // 将 markdeep 编辑页面的左侧文本保存在输入框中
      that.FormNewDataSet.description = document.getElementById("markdeeptext").value;
    },

    /**
     * @description: 单击 markdeep 按钮，进入 markdeep 编辑数据库配置信息的页面
     * @return void
     */
    handleMarkdown() {
      let that = this;
      this.dialogMarkdownVisible = true;
      document.getElementById("markdeeptext").focus();
      if (that.FormNewDataSet.description === '') {
        document.getElementById("markdeeptext").value = "**示例文档**\n\n预览时请不要点击右侧Contents。\n\n数据集描述和各类链接，如[搜狗](https://www.sogou.com/)。\n\n## 二级标题\n\n* 这个是\n* 无序列表\n\n或者：\n\n1. 可以是\n1. 有序列表\n\n还可以有表格：\n\n标签类型  | 描述\n---------|-------\n猫       | 可爱\n狗       | 可靠\n\n\n## 各类格式\n\n比如： **加粗**, _斜体_, ~~删除线~~\n\n小代码栏：`print 'hello world!'`\n\n大代码栏：\n```python\nimport os\nos.removedirs(\"/test\")\n```\n\n箭头也行： x -> y ； 1 ==> 2 <==> 3.\n\n可以是标签\n:   解释\nCode\n:   是代码的意思\n\n\n## ASCII ART 图\n\n图通常被封闭在一个由\"*\"符号组成的矩形中；并使用ASCII艺术风格绘制，带有\"-|+/\\*o\"等。\n\n*******************************************  这是图表右边的一段文字，\n* +-----------------+           .-.       *  很一般。\n* |\\                |        .-+   |      *  \n* | \\     A-B   *---+--> .--+       '--.  *  \n* |  \\              |   |     Cloud!    | *  \n* +---+-------------+    '-------------'  *  \n*******************************************  \n\n\n### 我得说，真是太酷了！\n\n********************\n*    +-+-+-+-*-o   *\n*   / / ^ /        *\n*  / v / /         *\n* +-+-+-+          *\n********************\n\n!!! Note: 我是标题\n    嘿，我是一张纸条。\n\n!!! WARNING\n    我是个警告，*可能会发生什么事*\n\n!!! ERROR: 也可以是错误笔记\n    错误内容\n\n更多语法可以参见 [Mark Deep](https://casual-effects.com/markdeep/) ~";
      } else {
        document.getElementById("markdeeptext").value = that.FormNewDataSet.description;
      }
      this.makeMarkdeep();
    },

    /**
     * @description: 获取 markdeep 编辑的源文本
     * @param {无}  无
     * @return void
     */
    getMarkdownText() {
      // 获取文本请调用这个函数，markdeep语法示例请见默认值
      return document.getElementById("markdeeptext").value;
    },

    /**
     * @description: 获取 markdeep 渲染后的文本 (编辑文档时)
     * @param {无}  无
     * @return void
     */
    getMarkdeep() {
      var he = "<meta charset=\"utf-8\" emacsmode=\"-*- markdown -*-\"> <link rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/apidoc.css?\">",
          fo = "<style class=\"fallback\">body{visibility:hidden}</style><script>markdeepOptions={tocStyle:'medium'};<" + "/script><script src=\"https://casual-effects.com/markdeep/latest/markdeep.min.js\" charset=\"utf-8\"><" + "/script>";
      var obj = document.getElementById("markdeeptext").value;
      return he + "\n\n" + obj + "\n\n" + fo;
    },

    /**
     * @description: 获取 markdeep 渲染后的文本 (预览文档时)
     * @param {txt}   待渲染的文本(实际上是数据库描述信息 description)
     * @return {he + txt + fo}
     */
    getMarkdeep2(txt) {
      var he = "<meta charset=\"utf-8\" emacsmode=\"-*- markdown -*-\"> <link rel=\"stylesheet\" href=\"https://casual-effects.com/markdeep/latest/apidoc.css?\">",
          fo = "<style class=\"fallback\">body{visibility:hidden}</style><script>markdeepOptions={tocStyle:'medium'};<" + "/script><script src=\"https://casual-effects.com/markdeep/latest/markdeep.min.js\" charset=\"utf-8\"><" + "/script>";
      return he + "\n\n" + txt + "\n\n" + fo;
    },

    /**
     * @description: 设置 markdeep 待渲染的文本
     * @return void
     */
    makeMarkdeep() {
      document.getElementById("markdeeppage").srcdoc = this.getMarkdeep();
    },

    showChart(ds) {
      let that = this;
      that.chart_option = ds.chart_option
      that.dialogTableVisible = true
    }
  },
}
</script>

<style scoped>
.center-container {
  width: 100%;
  height: 100%;
}

.center-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 50px auto;
  width: 90%;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  opacity: 0.95
}

.collapse-type >>> .el-collapse-item__header {
  font-size: 20px !important;
}
</style>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.chart {
  width: 100%;
  height: 250px;
}
</style>
